<template>
  <div id="teamPage">
    <van-button class="add-button" icon="plus" type="primary" @click="doJoinTeam" />
    <van-search v-model="searchTeamText" placeholder="请输入搜索关键词" @search="onSearch"/>
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab title="公开" name="public" />
      <van-tab title="加密" name="private" />
    </van-tabs>
    <div style="margin-bottom: 10px" />
    <van-empty v-if="teamList?.length < 1" description="数据为空" />

    <TeamCardList :team-list="teamList"/>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {showFailToast} from "vant";

const searchTeamText = ref('');

const router = useRouter();
const doJoinTeam = () => {
  router.push({
    path: '/team/add',
  })
}
const teamList = ref([]);
/**
 * 搜索队伍
 * @param val
 */
const listTeams = async (val:any, teamStatus: number) => {
  if (!val){
    val=null;
  }
  const res = await myAxios.get('/team/list',{
    params: {
      searchText: val,
      teamStatus: teamStatus,
      pageNum: 1
    }
  });
  if (res?.code === 0){
    teamList.value = res.data;
  }else {
    showFailToast('加载队伍失败，请刷新重试');
  }
}
onMounted(async ()=>{
  listTeams(searchTeamText.value, 0);
})

const onSearch =  (val:any) => {
  listTeams(val, 3);
}

const active = ref('public');
/**
 * 切换查询状态
 * @param name
 */
const onTabChange = (name:string) => {
  if (name === 'public'){
    //查公开
    listTeams(searchTeamText.value, 0)
  }else {
    //查加密
    listTeams(searchTeamText.value, 2)
  }

}

</script>

<style scoped>

</style>